//倒计时
import { useState, useEffect } from "react";

function App() {
  //控制，展示按钮B
  const [showButtonB, setShowButtonB] = useState(false);
  //控制，禁用状态
  const [disableButtonB, setDisableButtonB] = useState(true);
  //展示，倒计时数字
  const [countdown, setCountdown] = useState(3);

  useEffect(() => {
    let intervalId = null;
    if (showButtonB) {
      intervalId = setInterval(() => {
        setCountdown((prevCountdown) => prevCountdown - 1);
      }, 1000);
    }

    if (countdown === 0) {
      setDisableButtonB(false);
      clearInterval(intervalId);
    }

    return () => {
      clearInterval(intervalId);
    };
  }, [showButtonB, countdown]);

  //触发
  const handleClickButtonA = () => {
    setShowButtonB(true);
    setDisableButtonB(true);
    setCountdown(3);
  };

  const handleClickButtonB = () => {
    // 处理按钮 B 被点击后的逻辑
    console.log("按钮 B 被点击了");
  };

  return (
    <div>
      <button onClick={handleClickButtonA}>按钮 A</button>
      {showButtonB && (
        <div>
          <button onClick={handleClickButtonB} disabled={disableButtonB}>
            按钮 B
          </button>
          <span>{countdown}</span>
        </div>
      )}
    </div>
  );
}

export default App;
